<template>
  <div  class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handlePrint"
        >打 印</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleExportPDF"
        >下 载</el-button>
      </el-col>
    </el-row>
    <div  >
      <el-row :gutter="20" >
        <el-col :span="20" :offset="2">
          <el-card class="box-card" id="print-container">
            <table class="table caption thead th ">
              <thead class="thead">
              <tr>
                <th class="th"  scope="col" colspan="9">
                  <el-row>
                    <el-col :span="24" ><h1>报价单</h1></el-col>
                    <el-col :span="24"class="text-left" ><span>报价编号：{{ form.quotationNumber }}</span></el-col>
                    <el-col :span="12"class="text-left" >致收件单位(甲方):{{form.clientUnit}}</el-col>
                    <el-col :span="12"class="text-left" >联系电话:{{form.clientContactPhone}}</el-col>
                    <el-col :span="8"class="text-left" >报价有效期:{{form.quotationValidity}}</el-col>
                    <el-col :span="8"class="text-left" >传真:{{form.fax}}</el-col>
                    <el-col :span="8"class="text-left" >收件人:{{form.recipient}}</el-col>
                  </el-row>
                </th>
              </tr>
              <tr>
                <th class="th"  scope="col">序号</th>
                <th class="th" scope="col">名称</th>
                <th class="th" scope="col">规格型号</th>
                <th class="th" scope="col">梯号</th>
                <th class="th" scope="col">备注</th>
                <th class="th" scope="col">单位</th>
                <th class="th" scope="col">数量</th>
                <th class="th" scope="col">单价</th>
                <th class="th" scope="col">合计</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(detail,index) in form.ytQuotationDetailList">
                <th class="th" scope="row">{{ index+1 }}</th>
                <th class="th" scope="row">{{ detail.name }}</th>
                <th class="th" scope="row">{{ detail.specificationModel }}</th>
                <th class="th" scope="row">{{  }}</th>
                <th class="th" scope="row">{{ detail.remark }}</th>
                <th class="th" scope="row">{{ detail.unit }}</th>
                <th class="th" scope="row">{{ detail.quantity }}</th>
                <th class="th" scope="row">{{ detail.unitPrice }}</th>
                <th class="th" scope="row">{{ detail.totalPrice }}</th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="2">总价（人民币）</th>
                <th class="th" scope="row" colspan="7"> {{ form.price }}</th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="2"></th>
                <th class="th" scope="row" colspan="7"> {{ numberToChinese(form.price) }}</th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="2">最终总价（人民币）</th>
                <th class="th" scope="row" colspan="7"> {{ numberToChinese(form.price) }}</th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="9">
                  <el-row :gutter="20">
                    <el-col :span="4"  class="text-left">1.付款方式：</el-col>
                    <el-col :span="20"  class="text-left">
                      <el-radio-group v-model="form.paymentMethod">
                        <el-radio
                          v-for="dict in dict.type.qt_payment_method"
                          :key="dict.value"
                          :label="dict.value"
                        >{{dict.label}}</el-radio>
                      </el-radio-group>
                    </el-col>
                    <el-col :span="24"  class="text-left">1.1{{form.paymentMethodDescription}}</el-col>
                  </el-row>
                </th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="9">
                  <el-row>
                    <el-col :span="24" class="text-left">
                      2.货期：{{ form.deliveryPeriod}} 个工作日，施工期：{{form.constructionPeriod}} 个工作日
                    </el-col>
                  </el-row>
                </th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="9">
                  <el-row>
                    <el-col :span="24" class="text-left">
                      3.施工/交货地点：{{ form.constructionDeliveryLocation}}
                    </el-col>
                  </el-row>
                </th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="9">
                  <el-row :gutter="20">
                    <el-col :span="4" class="text-left">4.发票类型：</el-col>
                    <el-col :span="20"  class="text-left">
                      <el-radio-group v-model="form.invoiceType">
                        <el-radio
                          v-for="dict in dict.type.qt_invoice_type"
                          :key="dict.value"
                          :label="dict.value"
                        >{{dict.label}}</el-radio>
                      </el-radio-group>
                    </el-col>
                    <el-col :span="24"  class="text-left">
                      税率:{{form.taxRate}} %(如国家税率政策有变化，将控最新税率开具发票，价格不做变动。)
                    </el-col>
                  </el-row>
                </th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="9">
                  <el-row>
                    <el-col :span="24" class="text-left">
                      5.质量保修期：{{ form.qualityWarrantyPeriod}} 天，因非乙方广品原因造成的损坏或故障不在质量保修范围内 。
                    </el-col>
                  </el-row>
                </th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="9">
                  <el-row :gutter="20">
                    <el-col :span="24"  class="text-left">6.1 乙方指定收款账户:</el-col>
                    <el-col :span="4"  class="text-left">单位名称: </el-col><el-col :span="8"  class="text-left">{{form.payeeUnitName}}</el-col>
                    <el-col :span="4"  class="text-left">开户行: </el-col><el-col :span="8"  class="text-left">{{form.payeeBank}}</el-col>
                    <el-col :span="4"  class="text-left">单位名称: </el-col><el-col :span="8"  class="text-left">{{form.payeeUnitName}}</el-col>
                    <el-col :span="4"  class="text-left">账号: </el-col><el-col :span="8"  class="text-left">{{form.payeeAccountNumber}}</el-col>
                    <el-col :span="4"  class="text-left">税号: </el-col><el-col :span="8"  class="text-left">{{form.taxNumber}}</el-col>
                  </el-row>
                </th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="9">6.2如双方在执行过程发生争议，应通过友好协商方式解决。协商不成应提交有管辖权的人民法院诉讼解决。诉讼费用(包括但不限于律师赛用)由 败诉方承担。</th>
              </tr>
              <tr>
                <th class="th" scope="row" colspan="4">
                  <el-row>
                    <el-col :span="24" class="text-left">报价单位(乙方):</el-col>
                    <el-col :span="24" class="text-left">{{ form.quotingUnit }}</el-col>
                    <el-col :span="24" class="text-left">联系人：{{ form.quotingContact }}</el-col>
                    <el-col :span="8" class="text-left">电话：{{ form.quotingContactPhone }}</el-col>
                    <el-col :span="24" class="text-left">报价日期：{{ form.quotationDate }}</el-col>
                  </el-row>
                </th>
                <th class="th" scope="row" colspan="5">
                  <el-row>
                    <el-col :span="24" class="text-left">甲方确认(盖章):</el-col>
                    <el-col :span="24" class="text-left"><el-radio >同意报价方案</el-radio></el-col>
                    <el-col :span="24" class="text-left"><el-radio >其他意见</el-radio></el-col>
                  </el-row>
                </th>
              </tr>
              </tbody>
            </table>

          </el-card>
        </el-col>
      </el-row>

    </div>

  </div>
</template>

<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/quotation/info";
import { listDemo } from "@/api/quotation/demo";

export default {
  name: "Print",
  dicts: ['qt_status', 'qt_invoice_type', 'qt_payment_method', 'sys_yes_no', 'qt_demo_type'],
  data() {
    return {
      quotationId: '',
      // 报价详情明细表格数据
      ytQuotationDetailList: [],
      // 表单参数
      form: {},

    };
  },
  created() {
    const quotationId = this.$route.params && this.$route.params.quotationId;
    if(quotationId != undefined){
      this.quotationId = quotationId;
      this.getInfo();
    }

  },
  methods: {

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        quotationId: null,
        quotationNo: null,
        clientUnit: null,
        clientContactPhone: null,
        quotationValidity: null,
        fax: null,
        recipient: null,
        paymentMethod: null,
        paymentMethodDescription: null,
        deliveryPeriod: null,
        constructionPeriod: null,
        constructionDeliveryLocation: null,
        invoiceType: null,
        price: null,
        taxRate: null,
        qualityWarrantyPeriod: null,
        payeeUnitName: null,
        payeeBank: null,
        payeeAccountNumber: null,
        taxNumber: null,
        quotingUnit: null,
        quotingContact: null,
        quotingContactPhone: null,
        quotationDate: null,
        specialSeal: null,
        clientConfirmationSeal: null,
        isAgreeQuotation: null,
        otherOpinions: null,
        status: '草稿',
        remark: null,
        createdBy: null,
        createdTime: null,
        updatedBy: null,
        updatedTime: null,
        delFlag: null
      };
      this.ytQuotationDetailList = [];
      this.resetForm("form");
    },



    /** 修改按钮操作 */
    getInfo(row) {
      this.reset();
      const quotationId = this.quotationId
      getInfo(quotationId).then(response => {
        this.form = response.data;
        this.ytQuotationDetailList = response.data.ytQuotationDetailList;
        console.log("获取信息，this.form",this.form)
      });
    },

    // 打印按钮操作
    handlePrint() {
      // 获取要打印的 div 内容
     // document.body.innerHTML=document.getElementById("print-container").innerHTML;
      var headstr = "<html><head><title></title></head><body>";
      var footstr = "</body>";
      var newstr = document.all.item("print-container").innerHTML;
      var oldstr = document.body.innerHTML;
      document.body.innerHTML = headstr+newstr+footstr;
      window.print();
      document.body.innerHTML = oldstr;
      return false;
    },
    // 下载pdf按钮操作
    handleExportPDF() {

    }


  }
};
</script>
<style scoped>
.table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.caption {
  caption-side: bottom;
  padding: 10px;
  font-weight: bold;
}

.thead,
.tfoot {
 /*-- background-color: rgb(228 240 245);*/
}

.th,
.td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

.td:last-of-type {
  text-align: center;
}

.text-left {
  text-align: left;
}

</style>
